<template>
    <lay-layer v-model="visible" :title="layer_title" :shadeClose="shadeClose" :maxmin="true" :moveOut="true" :resize="true"
        closeBtn="1" :end="end" :close="close" :beforeClose="beforeClose">
        <lay-form :model="modelForm" ref="layFormRef" required>
            <div style="padding:10px;">
                <lay-form-item label="归属类别">
                    <lay-tree-select v-model="modelForm.pid" :data="data1" @change="change_tree_select"></lay-tree-select>
                </lay-form-item>
                <lay-form-item label="类别编号" v-show="http_r_p == 'up'">
                    <lay-input v-model="modelForm.id" :disabled="true"></lay-input>
                </lay-form-item>
                <lay-form-item label="类别名称">
                    <lay-input v-model="modelForm.name" placeholder="请输入名称"></lay-input>
                </lay-form-item>
                <lay-form-item label="排序权重">
                    <lay-input-number v-model="modelForm.i" :min="0" :max="9999"></lay-input-number>
                </lay-form-item>
            </div>
            <hr />
            <div style="padding:0px 10px 5px 10px;margin: 0px;">
                <lay-form-item style="text-align: right;padding:0px;margin: 0px;">
                    <!-- <lay-button size="sm" @click="original" v-show="http_r_p == 'up'">还原</lay-button> -->
                    <lay-button size="sm" type="primary" @click="submit">提交</lay-button>
                </lay-form-item>
            </div>
        </lay-form>
    </lay-layer>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { layer } from '@layui/layui-vue';
import { GoodsClsUP, GoodsClsNEW } from "../../../../../../api/module/user"; //请求模块

// const props = defineProps(['upbd']);
// const emit = defineEmits(['update:upbd', 'topClick']);
const emit = defineEmits(['topClick']);
const layer_title = ref('新增');//弹窗标题
const shadeClose = ref(true);//遮盖层关闭
const http_r_p = ref('up');//新增还是修改
const visible = ref(false);// 弹窗显示
const layFormRef = ref();

// 表单字段
const modelForm = ref({
    "id": 0,//类别ID
    "pid": 0,//父ID
    "name": "",//类别名称
    "i": 0,//排序
});
const data1 = ref([{
    title: '顶级类别',
    id: 0,//类别ID
    pid: 0,//父ID
    field: 'name1',
    children: []
}]);
const form = reactive({});//缓存旧数据为还原表单做准备
const childFun = (op: string, data: any, treeData: any) => {
    // console.log(op);
    data1.value = [{
        title: '顶级类别',
        id: 0,//类别ID
        pid: 0,//父ID
        field: 'name1',
        children: []
    }];
    console.log("弹窗接收", data);
    // console.log(treeData);
    // data1.value = treeData
    data1.value = [...data1.value, ...treeData];//分类树数组合并
    // op='up'//修改模式
    // op='new'//新增模式
    visible.value = !visible.value;
    if (op == 'up') {
        http_r_p.value = 'up';//新增还是修改
        layer_title.value = '修改';//弹窗标题
        shadeClose.value = true;//遮盖层关闭
        modelForm.value = {
            "id": data.id,//类别ID
            "pid": data.pid,//父ID
            "name": data.name,//类别名称
            "i": data.i,//排序

        };
        //把上级数据填到窗口中
        Object.assign(form, { ...data });
    } else {
        http_r_p.value = 'new';//新增还是修改
        layer_title.value = '新增';//弹窗标题
        shadeClose.value = false;//遮盖层关闭

        modelForm.value = {
            "id": 9999,//类别ID,新增时后端忽略此字段
            "pid": data.id,//父ID
            "name": "",//类别名称
            "i": 0,//排序

        }
    }
};

function change_tree_select(data: any) {
    console.log("归属类别：", data);
}


// 原始数据
const original = () => { Object.assign(modelForm.value, { ...form }); };
// 清空表单
const reset = () => { layFormRef.value.reset(); };
// 清除校验
const clearValidate = () => { layFormRef.value.clearValidate(); };
// 窗口销毁
const end = () => { };
// 窗口关闭
const close = () => { };
// 窗口关闭前置
const beforeClose = () => { original(); };
// 提交表单
const submit = function () {
    layFormRef.value.validate((isValidate: any, model: any, errors: any) => {
        console.log("提交表单=", isValidate, model);
        if (isValidate) {
            http_r(model);
        } else {
            console.log("HTTP请求不可知");
        }
    });
}
// HTTP请求
const http_r = async (model: any) => {
    //新增还是修改
    if (http_r_p.value == 'up') {
        let data = await GoodsClsUP(model);//HTTP
        console.log("修改回调=", data);
        if (data.code == 200) {
            layer.msg(data.msg, { icon: 1 }, async () => {
                emit('topClick', '父组件事件');
                visible.value = !visible.value;
            });
        } else {
            layer.msg(data.msg, { icon: 2 });
        }
    } else if (http_r_p.value == 'new') {
        let data = await GoodsClsNEW(model);//HTTP
        console.log("新增回调=", data);
        if (data.code == 200) {
            layer.msg(data.msg, { icon: 1 }, async () => {
                emit('topClick', '父组件事件');
                visible.value = !visible.value;
            });
        } else {
            layer.msg(data.msg, { icon: 2 });
        }
    } else {
        console.log("错误:新增修改之外");
    }

};



//向父组件暴露子组件的方法或者数据
defineExpose({ childFun, });
</script>